<template>

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="userAccount"
          name="userAccount"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="userPassword"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="checkPassword"
          type="password"
          name="checkPassword"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请再次填写密码' }]"
      />
      <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]"
      />
      <van-field
          v-model="sms"
          center
          clearable
          label="邮箱验证码"
          placeholder="请输入邮箱验证码"
          border="{{ false }}"
          use-button-slot
      >
        <template #button>
          <van-button
              size="small"
              type="primary"
              @click="sendCode"
              :disabled="timer > 0"
          >
            {{ timer > 0 ? `${timer}s` : '发送验证码' }}
          </van-button>
        </template>
      </van-field>
    </van-cell-group>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        注册
      </van-button>
    </div>
  </van-form>


</template>



<script setup lang="ts">
import { ref } from 'vue';
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import route from "../config/route";

const sms = ref('');
const timer = ref(0);
const timerInterval = ref(null);

const userAccount = ref('');
const userPassword = ref('');
const checkPassword = ref('');
const email = ref('');


// 发送验证码并开始倒计时
const sendCode = () => {
  if (timer.value > 0) {
    return; // 如果当前倒计时未结束，则不进行任何操作
  }
  console.log('验证码发送中...');
  toSendCode();
  timer.value = 60; // 设置倒计时秒数

  // 开始倒计时
  timerInterval.value = setInterval(() => {
    if (timer.value > 0) {
      timer.value--;
    } else {
      clearInterval(timerInterval.value);
    }
  }, 1000);
};
const toSendCode=async()=>{
  // 模拟发送验证码操作
  const res = await myAxios.post('/user/sendCode', {
    email: email.value,
    code:"",
  })
}


const onSubmit = async () => {
  const res = await myAxios.post('/user/register', {
    userAccount: userAccount.value,
    userPassword: userPassword.value,
    checkPassword: checkPassword.value,
    email: email.value,
    code:sms.value,
  })
  console.log(res, '用户注册');
  if (res.code === 0 && res.data) {
    Toast.success('注册成功');
    // 跳转到之前的页面
    const redirectUrl = route.query?.redirect as string ?? '/';
    window.location.href = redirectUrl;
  } else {
    Toast.fail('注册失败\n'+res.description);
  }
};


</script>



<style scoped>

</style>